<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app" >
    <blog-post :title.sync="title" @add:title="title=$event"></blog-post>
    {{title }}
</div>


<template id="template">
    <div style="font-size: large; color: chartreuse">
        <button type="button" @click="$emit('add:title','内部发送数据')">提交</button>
        {{title}}
    </div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>


    Vue.component('blog-post', {
        template: '#template',
        // props: ['title','job','id'],
        props: {
            age: Number,
            job: {
                type: String,
                default: '程序員'
            },
            title: String,
            id: Number,
            status: {
                function (value) {
                    // 这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexOf(value) !== -1
                }

            }
        },
        data(){
            return {
                count:  this.job,
            }
        }
    });


    const btn = {
        template: "#btn",
        data() {
            return {
                numbers: [1, 2, 3, 4, 5],
                sets: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]],
                apples: ['a', 'b', 'c', 'd'],
                picked: ''
            }

        },
        computed: {
            evenNumbers: function () {
                return this.numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                })
            },


        }
    };
    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            apples: [1, 2, 3, 4],
            selected: '',
            title: null,
            danger:'很愛很愛你',
            object:{
                id: 66,
                job: '教师'
            },
            todos: [
                {
                    id: 1,
                    title: 'Do the dishes',
                },
                {
                    id: 2,
                    title: 'Take out the trash',
                },
                {
                    id: 3,
                    title: 'Mow the lawn'
                }
            ]
        },
        components: {
            btn: btn
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {
            remove(event) {

                console.log(event)
            },
            receive(obj) {
                alert('外部接受到数据'+obj)
            }

        },
        computed: {}
    })


</script>
</body>
</html>
